

<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                          <div class=" animate fadeIn">
                              <form id="searchForm" class="form-horizontal">
                                  <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Search</i></h5>
                                  </div>
                                     <div class="ibox-content">
                                          <?php foreach ($items as $inv) {?>
                                              <input  type="hidden" id="<?php echo $inv->item_id; ?>" value="<?php echo $inv->description; ?>">
                                          <?php }
?>
                                          <div class="form-group">
                                                      <label class="col-lg-4 control-label">Item Number</label>
                                                      <div class="col-lg-4">
                                                              <select style="width: 189px;" class="chosen-select" name="item_number" id="item_num">
                                                                  <?php foreach ($items as $inv) {?>
                                                                      <option value="<?php echo $inv->item_id; ?>"><?php echo $inv->item_num; ?></option>
                                                                  <?php }
?>
                                                              </select>
                                                          </div>
                                                  </div>
                                          <div class="form-group"><label class="col-lg-4 control-label">Description</label>
                                              <div class="col-lg-5">
                                                  <input type="text" placeholder="" id="descp" class="form-control" readonly>
                                              </div>
                                          </div>
                                          <div class="form-group"><label class="col-lg-4 control-label">Effective Date</label>
                                              <div class="col-lg-5">
                                                  <input type="search" placeholder="" name="effective_date" id="effect_date" class="form-control">
                                              </div>
                                          </div>
                                      <div class="form-inline form-group" >
                                          <label class="col-lg-4 control-label">Show Current</label>
                                          <div class="col-lg-10 input-s">
                                              <input type="checkbox" name="cur_box" value="ok" class="i-checks" checked>
                                          </div>
                                      </div>
                                      <div class="form-inline form-group" >
                                          <label class="col-lg-4 control-label">Show Future</label>
                                          <div class="col-lg-10 input-s">
                                              <input type="checkbox" name="fut_box" value="ok" class="i-checks" checked>
                                          </div>
                                      </div>
                                      <div class="form-inline form-group" >
                                          <!-- /<label class="col-sm-4 control-label"></label> -->
                                          <div class="col-xs-8 col-xs-push-4">
                                             <button id="search-btn" class="btn btn-primary btn-md m-t-n-xs search-btn btn-margin-right"> Find</button>
                                             <a href="javascript:document.getElementById('searchForm').reset();" class="btn btn-warning btn-md m-t-n-xs  clear-btn" id="search-form"> Clear</a>

                                              <button class="btn btn-primary btn-md m-t-n-xs regular-btn pull-right" type=""> New</button>
                                              <button class="btn btn-primary btn-md m-t-n-xs regular-btn pull-right btn-margin-right" type=""> Mass Upload</button>
                                          </div>
                                      </div>
                                  </div>
                              </form>
                          </div>
                          <div class="row">
                              <div class="col-lg-2">
                                  <button id = "adds" class="btn btn-success m-t-n-xs add-tab-btn" type="button"> Add</button>
                              </div>
                          </div>
                          <div class="row" id="searchResult" >
                              <div class="col-lg-12">
                                  <div class="ibox float-e-margins">
                                      <div class="ibox-content">
                                          <table class="table-bordered table-compact" style="width:100%;">
                                              <thead>
                                                  <tr>
                                                      <th style="padding:10px;text-align:center;">Item Number</th>
                                                      <th style="padding:10px;text-align:center;">Effective Date</th>
                                                      <th style="padding:10px;text-align:center;width:100px;">Unit Cost</th>
                                                      <th style="padding:8px;text-align:center;width:75px;">Action</th>
                                                  </tr>
                                              </thead>
                                              <tbody id="resultfound" >

                                              </tbody>
                                          </table>
                                      </div>
                                  </div>
                              </div>
                          </div>
                    </div>
                </div>
            </div>
        </div>
         </div>
    </div><!-- END of class row-->
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
    $(document).ready(function(){
        $('#hid').hide();
        $(".chosen-select").chosen({width:"140px;"});
        $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
              });
        $('#effect_date').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true,
                format: "yyyy-mm-dd"
            });
        $('#adds').click(function(){
            $('#notify').text("");
                if($('#count_add').val() == 0){
                    $('#tab-list').append('<li id="add-link" class="links"><a id="2nd" data-toggle="tab" href="#add">Cost Add<button id="addX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                    $('.tab-content').append('<div id="add" class="tab-pane"><div class="panel-body"><div id="change2"></div></div></div>');
                    $("#change2").load("<?php echo $this->session->userdata('forload') . '/add_form'; ?>")
                    $('#count_add').val('1');
                    add_action('show'); search_action('close');
                }active_add();
            });

        $('#item_num').change(function(){
            var item_id = '#'+ $('#item_num').val();
            var ee = $('.ibox-content').find(item_id).val();
            $('#descp').val(ee);


        });
        $("#search-btn").click(function(e) {

            e.preventDefault();
            var trHTML='';
            var uomCode = $('#uomCode').val();
            var uomName = $('#uomName').val();
            console.log('hi');
            $('#resultfound').empty();
              $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/search_cost'); ?>",
                cache: false,
                dataType: 'json',
                data: $('#searchForm').serialize(),
                success: function(e) {
                    console.log(e);
                    if(e == "No results found."){
                        console.log('error');
                        $('#resultfound').append("<td colspan='4' align='center'><h3>No Result Found</h3></td>");
                        notifymsg("danger","No Result Found");
                    }else{
                        console.log('success');
                        var countData=0;
                        $.each(e, function(i, item) {
                            var cb_state = "hover";
                            if(e[i].enable_flag == "Y"){
                            cb_state = "checked";
                            }
                            trHTML += '<tr style="line-height:1;padding:2px;"><input id="cost_id" type="hidden" value="'+ e[i].cost_id +'"><td style="text-align:left; padding:5px;">'+ e[i].item_num +'</td><td style="text-align:left; padding-left:5px;">'+ e[i].effect_date +'</td><td style="text-align:right; padding-right:5px;">'+ e[i].full_cost +'</td><td align="center" style="text-align:left; padding:2px;"><button  style="margin-left:5px;margin-top:2px;" class="btn btn-sm btn-outline btn-info btn-xs edit" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button style="margin-left: 2px;" class="btn btn-sm btn-outline btn-info btn-xs view" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td></tr>';
                            countData++;
                        });
                        $('#resultfound').append(trHTML);
                        notifymsg("success","   . . . Search Success  , Found("+countData+") Item(s)");
                    }
                },
                complete: function(){
                  $("#search-btn").removeAttr('disabled');
                },
                beforeSend: function(){
                  $("#search-btn").attr('disabled',true);
                }
              });
            });
        $(document).on('click','.btn.btn-sm.btn-outline.btn-info.btn-xs.edit',function(){
                var id         = $(this).closest('tr').children('#cost_id').val();
                if($('#count_edit').val() == 0){
                    $('#tab-list').append('<li id="edit-link" class="links"><a data-toggle="tab" href="#edit">Cost Edit<button id="editX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                    $('.tab-content').append('<div id="edit" class="tab-pane"><div class="panel-body"><div id="change3"></div></div></div>');
                    $("#count_edit").val('1');
                    }
                $("#change3").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>"+id)
                edit_action('show'); search_action('close');
                notifymsg("hide","hide");
            });
        $(document).on('click','.btn.btn-sm.btn-outline.btn-info.btn-xs.view',function(){
                var id          = $(this).closest('tr').children('#cost_id').val();
                    if($('#count_view').val() == 0){
                    $('#tab-list').append('<li id="view-link" class="links"><a data-toggle="tab" href="#view">Cost View<button id="viewX" style="margin-left:30px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                    $('.tab-content').append('<div id="view" class="tab-pane fade in"><div class="panel-body"><div id="change4"></div></div></div>');
                    $("#count_view").val('1');
                    }
            $("#change4").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>"+id)
            view_action('show'); search_action('close');
            notifymsg("hide","hide");
            });

    });
</script>